<template>
  <div class="snow-background">
    <canvas ref="snowCanvas" class="snow-canvas"></canvas>
  </div>
</template>

<script setup>
  import { ref, onMounted, onUnmounted } from 'vue';

  const snowCanvas = ref(null);
  let canvas, ctx;
  let snowflakes = [];
  let animationId = null;
  let isPaused = false;

  // 小米粒状雪花
  class GrainSnow {
    constructor(width, height) {
      this.reset(width, height);
      this.size = Math.random() * 1.2 + 0.3; // 小米粒大小
      this.speed = this.size * 0.6; // 缓慢速度
      this.alpha = Math.random() * 0.6 + 0.4; // 半透明
      this.drift = Math.random() * 0.3 - 0.15; // 轻微水平漂移
    }

    reset(width, height) {
      this.x = Math.random() * width;
      this.y = Math.random() * -height;
    }

    update(width, height) {
      if (isPaused) return;
      this.y += 0.8 + this.speed; // 缓慢下落
      this.x += this.drift;

      // 边界重置
      if (this.y > height) this.reset(width, height);
      if (this.x < 0) this.x = width;
      if (this.x > width) this.x = 0;
    }

    draw(ctx) {
      ctx.save();
      ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
    }
  }

  // 冰晶状雪花
  class CrystalSnow {
    constructor(width, height) {
      this.reset(width, height);
      this.size = Math.random() * 3 + 1.5; // 稍大的冰晶
      this.speed = this.size * 0.4; // 更缓慢
      this.alpha = Math.random() * 0.7 + 0.3;
      this.rotation = Math.random() * Math.PI * 2;
      this.rotationSpeed = Math.random() * 0.01 - 0.005; // 缓慢旋转
      this.drift = Math.random() * 0.5 - 0.25; // 水平漂移
    }

    reset(width, height) {
      this.x = Math.random() * width;
      this.y = Math.random() * -height;
    }

    update(width, height) {
      if (isPaused) return;
      this.y += 0.6 + this.speed; // 比米粒更慢
      this.x += this.drift;
      this.rotation += this.rotationSpeed;

      // 边界重置
      if (this.y > height) this.reset(width, height);
      if (this.x < 0) this.x = width;
      if (this.x > width) this.x = 0;
    }

    draw(ctx) {
      ctx.save();
      ctx.translate(this.x, this.y);
      ctx.rotate(this.rotation);
      ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;

      // 绘制冰晶形状（八角形）
      ctx.beginPath();
      for (let i = 0; i < 8; i++) {
        const angle = (i * Math.PI) / 4;
        const radius = this.size * (i % 2 === 0 ? 1 : 0.6); // 交错大小
        ctx.lineTo(radius * Math.cos(angle), radius * Math.sin(angle));
      }
      ctx.closePath();
      ctx.fill();
      ctx.restore();
    }
  }

  // 初始化雪花（数量少，混合两种类型）
  function initSnowflakes(width, height) {
    snowflakes = [];
    const totalCount = Math.floor((width * height) / 8000); // 数量减少

    // 60%小米粒，40%冰晶
    for (let i = 0; i < totalCount; i++) {
      if (Math.random() < 0.6) {
        snowflakes.push(new GrainSnow(width, height));
      } else {
        snowflakes.push(new CrystalSnow(width, height));
      }
    }
  }

  // 轻微风力效果
  function getWind() {
    return Math.sin(Date.now() * 0.0005) * 0.3; // 极轻微风
  }

  // 动画循环
  function animate() {
    if (!ctx) return;

    const { width, height } = canvas.getBoundingClientRect();
    ctx.clearRect(0, 0, width, height);

    const wind = getWind();
    snowflakes.forEach((snowflake) => {
      // 应用轻微风力
      snowflake.drift += wind * 0.02;
      // 限制漂移幅度
      snowflake.drift = Math.max(-0.3, Math.min(0.3, snowflake.drift));

      snowflake.update(width, height);
      snowflake.draw(ctx);
    });

    animationId = requestAnimationFrame(animate);
  }

  // 调整Canvas大小
  function resizeCanvas() {
    if (!canvas) return;

    const { width, height } = canvas.getBoundingClientRect();
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
      initSnowflakes(width, height);
    }
  }

  onMounted(() => {
    canvas = snowCanvas.value;
    if (!canvas) return;

    ctx = canvas.getContext('2d');
    resizeCanvas();

    window.addEventListener('resize', resizeCanvas);
    document.addEventListener('visibilitychange', () => {
      isPaused = document.hidden;
    });

    animate();
  });

  onUnmounted(() => {
    if (animationId) cancelAnimationFrame(animationId);
    window.removeEventListener('resize', resizeCanvas);
    document.removeEventListener('visibilitychange', () => {
      isPaused = document.hidden;
    });
  });
</script>

<style scoped>
  .snow-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9;
  }

  .snow-canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
</style>
